import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import LinkIcon from "../../shared/LinkIcon";
import MainLogoSvg from "../../shared/svg/MainLogoSvgComponent";
import styles from "./Header.module.css";
import Theme from "../../../features/theme/Theme";
import ProfileSvg from "../../shared/svg/ProfileSvg";
import cn from "classnames";

export default function Header() {
    const [position, setPosition] = useState(window.scrollY);
    const [visible, setVisible] = useState(true);
    const threshold = 200;

    useEffect(() => {
        const handleScroll = () => {
            const moving = window.scrollY;

            setVisible(position > moving || threshold > moving);
            setPosition(moving);
        };

        window.addEventListener("scroll", handleScroll);

        return () => {
            window.removeEventListener("scroll", handleScroll);
        };
    });

    return (
        <header
            className={cn(
                styles.header,
                visible ? styles.visible : styles.hidden
            )}
        >
            <div className={styles.logo}>
                <div className={styles["logo__img"]}>
                    <Link to={"/main"}>
                        <LinkIcon
                            title="click to navigate to the home page"
                            Icon={MainLogoSvg}
                        />
                        <span className={styles["logo__text"]}>
                            VIDEO COURSES
                        </span>
                    </Link>
                </div>
            </div>

            <div className={styles.actions}>
                <Theme />
                <div className={styles["profile-icon"]} tabIndex={0}>
                    <Link to={"/profile"}>
                        <LinkIcon
                            title="click to view your profile"
                            Icon={ProfileSvg}
                        />
                    </Link>
                </div>
            </div>
        </header>
    );
}
